import {Meta} from "@storybook/addon-docs/blocks";

<Meta title="Widgets/Definition/Accessibility" />

# Definition Accessibility

The Definition widget is designed with accessibility in mind, providing users with access to definitions through an interactive text prompt that opens a popover with additional content.

## Keyboard Navigation

-   Users can navigate to the definition text prompt using the `Tab` key.
-   Once focused, the definition popover can be opened with `Enter` or `Space`.
-   When the popover is open, users can navigate to the close button using `Tab`.
-   The popover can be closed by:
    -   Pressing `Escape`
    -   Focusing on the close button and pressing `Enter`
    -   Clicking outside the popover

## Screen Reader Support

-   The definition text prompt is a semantically appropriate interactive element recognizable by screen readers.
-   The popover follows ARIA best practices for modal dialogs.
-   The definition content is rendered using the standard Perseus Renderer, inheriting its accessibility features for rich content.

## Visual Indicators

-   The definition text prompt appears in blue to indicate interactivity.
-   When the text prompt is hovered, focused, or pressed, it displays a blue underline for additional visual feedback.
-   The popover has a visible close button to clearly indicate how to dismiss it.

## Best Practices

-   Use clear, concise text for the toggle prompt that indicates a definition is available.
-   Keep definition content focused on explaining the term without excessive information.
-   Avoid using definitions for critical content that all users must see.
-   Consider that the definition content supports rich formatting and can include other widgets.

## Additional Notes

-   The widget leverages [Wonder Blocks Clickable](https://khan.github.io/wonder-blocks/?path=/docs/packages-clickable-clickable-accessibility--docs) and [Wonder Blocks Popover](https://khan.github.io/wonder-blocks/?path=/docs/packages-popover-popover-accessibility--docs), which are built with accessibility in mind.
-   If you encounter any accessibility issues, please report them to the team.
